<template>
	<view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
			<view class="orderList">
				<view class="item flex-btw" v-for="(item, index) in orders" :key="index">
					<view class="card">
						<image class="cardImg" :src="item.cardImg"></image>
						<view class="sjavatar">
							<image :src="item.sjavatar" mode=""></image>
						</view>
						<text class="sjname">{{item.sjname}}</text>
						<text class="cardType">{{item.cardType}}</text>
					</view>
					<view class="detail flex-btw">
							<view class="payType">
								<image :src="imgwx" mode="" v-if="item.payType=='wx'"></image>
								<image :src="imgzfb" mode="" v-if="item.payType=='zfb'"></image>
							</view>
							<view class="payDetail">
								<text class="payMoney">¥{{item.payMoney}}</text>
								<text class="omoney"><text class="pre">实际支付:</text>¥{{item.omoney}}</text>
								<text class="date">{{item.date}}</text>
							</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var img1 = require('../../static/test/a5.jpg');
	var img2 = require('../../static/test/a4.jpg');
	var imgwx = require('../../static/imgs/order/dd_wx@2x.png');
	var imgzfb = require('../../static/imgs/order/dd_zfb@2x.png');
	!img1.startsWith('/') && (img1 = '/' + img1);
	!img2.startsWith('/') && (img2 = '/' + img2);
	!imgwx.startsWith('/') && (imgwx = '/' + imgwx);
	!imgzfb.startsWith('/') && (imgzfb = '/' + imgzfb);
	export default {
		data() {
			return {
				imgwx,
				imgzfb,
				orders: [
					{cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', payType: 'wx', payMoney: 1680, omoney: '2998', date: '2020-4-12 21:59'},
					{cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', payType: 'wx', payMoney: 1680, omoney: '2998', date: '2020-4-12 21:59'},
					{cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', payType: 'wx', payMoney: 1680, omoney: '2998', date: '2020-4-12 21:59'},
					{cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', payType: 'wx', payMoney: 1680, omoney: '2998', date: '2020-4-12 21:59'}
				]
			}
		},
		methods: {
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		.item {
			padding: 10pt;
			.card {
				position: relative;
				width: 40vw;
				max-width: 200px;
				height: 20vw;
				max-height: 100px;
				.cardImg {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
				.sjavatar {
					position: absolute;
					top: 5px;
					left: 5px;
					image {
						width: 25px;
						height: 25px;
						border-radius: 50%;
					}
				}
				.sjname {
					color: #fff;
					font-size: 12px;
					position: absolute;
					left: 38px;
					top: 7px;
				}
				.cardType {
					color: #fff;
					font-size: 20px;
					position: absolute;
					top: 28%;
					width: 100%;
					text-align: center;
					left: 0;
				}
			}
			.detail {
				flex-grow: 1;
				.payType {
					padding: 0 10px 0 20px;
					image {
						width: 22px;
						height: 22px;
					}
				}
				.payDetail {
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.payMoney {
						background-color: #000;
						color: #fff;
						padding: 0 10px;
						font-size: 16px;
					}
					.omoney {
						color: #ff0000;
						font-size: 20px;
						height: 40px;
						line-height: 40px;
						.pre {
							color: #000;
							font-size: 16px;
							padding-right: 10px;
						}
					}
					.date {
						color: #C7C7C7;
						font-size: 13px;
					}
				}
			}
		}
	}
</style>